<template>
  <div ref="swiperContainerRef" class="w-full">
    <Swiper
      class="rounded-md"
      @slide-change="handleSliderChange"
      @swiper="handleSwiperInit"
      :controller="{ inverse: true }"
      :modules="modules"
      :pagination="{ el: '.swiper-pagination' }"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :initial-slide="modelValue.pageIndex"
    >
      <SwiperSlide>
        <div class="slider-style"></div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="slider-style !text-xl">
          <div class="w-full">{{ title }}</div>
          <div class="w-full">{{ subTitle }}</div>
        </div>
      </SwiperSlide>
      <SwiperSlide v-for="(textArr, index) in sliderArr" :key="index" class="slider-style">
        <div v-for="(text, index) in textArr" :key="index" class="w-full">
          {{ text }}
        </div>
      </SwiperSlide>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    </Swiper>
  </div>
</template>
<script setup>
import { useModel, watch, ref, effect } from "vue";
import useController from "../../hooks/useController";
import { useElementSize, onKeyStroke, onKeyDown } from "@vueuse/core";
import { TEXTALIGN } from "../../utils/constant";

const swiper = ref(null);
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  screenInfo: { type: Object, default: () => ({}) },
});
const emit = defineEmits(["update:modelValue", "change"]);
const modelValue = useModel(props, "modelValue", emit);
const {
  Swiper,
  SwiperSlide,
  modules,
  lineHeight,
  subTitle,
  title,
  fontColor,
  sliderArr,
  fontSize,
  textAlign,
  bgColor,
  handleSliderChange,
  padding,
  pageIndex,
} = useController(modelValue, emit);

const swiperContainerRef = ref(null);

const { width } = useElementSize(swiperContainerRef);

function handleSwiperInit(cswiper) {
  swiper.value = cswiper;
}

watch(width, (newValue) => {
  modelValue.value.controllWidth = newValue;
  console.log("swiper wdith -->", newValue);
  emit("change");
});

watch(
  [() => modelValue.value.payload, () => modelValue.value.messageType],
  (value, oldvalue) => {
    const [oldPayload, oldMessageType] = oldvalue;
    if (oldPayload && swiper.value) {
      swiper.value.slideTo(1);
    }
  },
  {}
);

watch(pageIndex, (newVal) => {
  if (swiper.value) {
    setTimeout(() => {
      swiper.value.slideTo(newVal);
    });
  }
});

defineExpose({ swiper });
</script>
<style scoped>
.slider-style {
  background-color: v-bind(bgColor);
  text-align: v-bind(textAlign);
  /* height: v-bind(height); */
  font-size: v-bind(fontSize);
  color: v-bind(fontColor);
  line-height: v-bind(lineHeight);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-weight: 800;
  transition: height 0.3s linear;
  padding: v-bind(padding);
  @apply h-[230px] md:h-[280px];
}

.swiper {
  --swiper-pagination-color: #fff; /* 两种都可以 */

  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}
</style>
